{% extends "admin/change_form.html" %}
{% load staticfiles %}
{% load i18n admin_urls static admin_modify %}
{% block extrahead %}
    {{ block.super }}
    <link rel="stylesheet" href="{% static "css/font-awesome.css" %}" />
    <link rel="stylesheet" href="{% static "css/jstree/style.min.css" %}" />
    <style>
        .jstree-default {
            background: white;
        }
        .jstree-open {
            background: white;
        }
        .jstree-default>.jstree-striped {
            background: none;
        }
        .jstree-default>.jstree-container-ul>.jstree-node {
            margin-left: 14px;
            margin-right: 0;
            margin-bottom: 5px;
        }
    </style>
    <script src="{% static "js/jquery.js" %}"></script>
    <script src="{% static "js/jstree.js" %}"></script>
    <script src="{% static "js/jstree_plugins/jstree.checkbox.js" %}"></script>
{% endblock %}

{% block content %}
    {% block object-tools %}
        {% if change %}
            {% if not is_popup %}
                <ul class="object-tools">
                    {% block object-tools-items %}
                        <li>
                            {% url opts|admin_urlname:'history' original.pk|admin_urlquote as history_url %}
                            <a href="{% add_preserved_filters history_url %}" class="historylink">{% trans "History" %}</a>
                        </li>
                        <li>
                            <a href="../../change/">{% trans "返回修改" %}</a>
                        </li>
                        <li>
                            <a href="../group/permissions/">{% trans "组权限" %}</a>
                        </li>

                        {% if has_absolute_url %}
                            <li><a href="{{ absolute_url }}" class="viewsitelink">{% trans "View on site" %}</a></li>
                        {% endif %}
                    {% endblock %}
                </ul>
            {% endif %}
        {% endif %}
    {% endblock %}
    {% block after_related_objects %}
        <div id="content-main">
            <form action="{{ form_url }}" method="post" id="menu_perms_form" novalidate>
                {% csrf_token %}
                {% block form_top %}{% endblock %}
                {% block field_sets %}
                    {% for fieldset in adminform %}
                        {% include "admin/includes/fieldset.html" %}
                    {% endfor %}
                {% endblock %}
                <div class="results" id="tree_menu"></div>
                {% block submit_buttons_bottom %}
                    {% submit_row %}
                {% endblock %}
                {% block admin_change_form_document_ready %}
                    <script type="text/javascript"
                            id="django-admin-form-add-constants"
                            src="{% static 'admin/js/change_form.js' %}"
                            {% if adminform and add %}
                                data-model-name="{{ opts.model_name }}"
                            {% endif %}>
                    </script>
                {% endblock %}
                {% prepopulated_fields_js %} 
            </form>
        </div>
    {% endblock %}
    <script type="text/javascript">
        function getCookie(name) {
            var cookieValue = null;
            if (document.cookie && document.cookie != '') {
                var cookies = document.cookie.split(';');
                for (var i = 0; i < cookies.length; i++) {
                    var cookie = jQuery.trim(cookies[i]);
                    // Does this cookie string begin with the name we want?
                    if (cookie.substring(0, name.length + 1) == (name + '=')) {
                        cookieValue = decodeURIComponent(cookie.substring(name.length + 1));
                        break;
                    }
                }
            }
            return cookieValue;
        }
        var csrftoken = getCookie('csrftoken');
        function csrfSafeMethod(method) {
            // these HTTP methods do not require CSRF protection
            return (/^(GET|HEAD|OPTIONS|TRACE)$/.test(method));
        }
        jQuery.ajaxSetup({
            beforeSend: function(xhr, settings) {
                if (!csrfSafeMethod(settings.type) && !this.crossDomain) {
                    xhr.setRequestHeader("X-CSRFToken", csrftoken);
                };
            }
        });
        
        function user_change(u_or_g) {
            $.ajax({
                url: '/admin/treemenu/menuitem/{{ original.root.pk }}/flatten_children',
                method: 'GET',
                dataType: 'json',
                data: $('#menu_perms_form').serialize(),
                success: function(result) {
                    $('#tree_menu').jstree(true).settings.core.data = result;
                    $('#tree_menu').jstree(true).load_node('#');
                }
            })
        }
    </script>
    <script type="text/javascript">
        (function ($, undefined) {
            "use strict";
            $.jstree.defaults.conditionalselect = function () { return true;  };
            $.jstree.plugins.conditionalselect = function (options, parent) {
                this.activate_node = function (obj, e) {
                    if(this.settings.conditionalselect.call(this, this.get_node(obj))) {
                        parent.activate_node.call(this, obj, e);
                    }
                };
            };
        })(jQuery);
        $('#tree_menu').jstree({
            "core" : {
                "animation" : 0,
                "check_callback" : true,
                "themes" : {"stripes": true},
                'data' : {
                    'url': '/admin/treemenu/menuitem/{{ original.root.pk }}/flatten_children',
                    'dataType': 'json',
                    'data': $('#menu_perms_form').serialize(),
                }
            },
            "checkbox": {
                "keep_selected_style": false
            },
            "plugins": [
                ["checkbox"]
            ]
        })
        .on("select_node.jstree", function (e, data) {
            $('#id_checked_menuitems').val($('#tree_menu').jstree(true).get_selected());
            $('#id_unchecked_menuitems').val($('#tree_menu').jstree(true).get_selected());
            // $.ajax({
            //     'url': '/admin/treemenu/menuitem/' + data.node.id + '/api/assign_perm',
            //     'method': 'POST',
            //     'dataType': 'json',
            //     'data': $('#menu_perms_form').serialize(),
            // })
        })
        .on("deselect_node.jstree", function (e, data) {
            $('#id_menuitems').val($('#tree_menu').jstree(true).get_selected());
            // $.ajax({
            //     'url': '/admin/treemenu/menuitem/' + data.node.id + '/api/remove_perm',
            //     'method': 'POST',
            //     'dataType': 'json',
            //     'data': $('#menu_perms_form').serialize(),
            // })
        });
    </script>
{% endblock %}
